﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Lenda | Product</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/ewen-icons.css">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="css/cubeportfolio.min.css">
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="css/owl.transitions.css">
    <link rel="stylesheet" type="text/css" href="css/settings.css">
    <link rel="stylesheet" type="text/css" href="css/bootsnav.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css">
    <link rel="stylesheet" type="text/css" href="css/loader.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!--HEADER STARTS-->
    <header class="transparent">
      <nav class="navbar navbar-default navbar-fixed white no-background bootsnav">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
              <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="index.html">
              <img src="images/logo.png" class="logo logo-display" alt="">
              <img src="images/logo-black.png" class="logo logo-scrolled" alt="">
            </a>
          </div>
          <div class="collapse navbar-collapse" id="navbar-menu">
            <ul class="nav navbar-nav navbar-right" data-in="fadeIn" data-out="fadeOut">
              <li><a href="index.html">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li class="dropdown">
                <a href="javascript:;">Product</a>
                <ul class="dropdown-menu">
                  <li><a href="product.html?Radiator">Radiator</a></li>
                  <li><a href="product.html?Engine">Engine</a></li>
                  <li><a href="product.html?Intercooler">Intercooler</a></li>
                  <li><a href="product.html?Others">Others</a></li>
                </ul>
              </li>
              <li><a href="contact.html">Contact Us</a></li>
              <div id="menu_bars" class="right">
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
              </div>
            </ul>
          </div>
          <div class="sidebar_menu">
            <nav class="pushmenu pushmenu-right">
              <a class="push-logo" href="index.html"><img src="images/logo-black.png" alt="logo"></a>
              <ul class="push_nav centered">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="product.html">Product</a></li>
                <li><a href="contact.html">Contact Us</a></li>
              </ul>
              <div class="clearfix"></div>
              <ul class="social bottom20 top20">
                <li><a href="#"><i class="fa fa-whatsapp"></i></a></li>
                <li><a href="#"><i class="fa fa-skype"></i></a></li>
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              </ul>
            </nav>
          </div>
        </div>
      </nav>
    </header>
    <!--HEADER STARTS ends-->

    <div id="app">
      <!-- Page Header -->
      <section class="padding page_header page_header_one">
        <div class="container">
          <div class="row">
            <div class="col-sm-12 text-center">
              <h1 class="text-capitalize top40" v-text="type">Products</h1>
              <p class="bottom30">Look forward to hear from you!</p>
              <ul class="breadcrumb_link">
                <li class="active"><a href="index.html">Home</a></li>
                <li>Product</li>
                <li v-text="type"></li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <!-- Page Header ends -->

      <!-- Products -->
      <section class="product margin_top margin_bottom">
        <div class="container">
          <div class="row">

            <ul class="col-sm-12 top15 car-letter" v-if="itemList.length">
              <li v-for="letter in letters">
                <a href="javascript:;" :class="{'active': letter==curLetter}" @click="curLetter=letter" v-text="letter"></a>
              </li>
            </ul>

            <ul class="col-sm-12 car-branch">
              <li v-for="branch in branches" v-if="curLetter==branch[0]">
                <a v-cloak href="javascript:;" :class="{'active':curBranch==branch}" @click="curBranch=branch"
                class="filter btn_fill_white btn_border btn_default" v-text="branch"></a>
              </li>
            </ul>

            <div id="portfoliolist">
              <div v-for="item in itemList" v-if="item.branch==curBranch" class="portfolio">
                <div class="portfolio-wrapper">
                  <a :href="'images/product/' + item.productImage" alt="" />
                  <img :src="'images/product/' + item.productImage" alt="" />
                  <div class="label">
                    <div class="label-text">
                      <a class="text-title" v-text="item.productName"></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>
      <!-- Products Ends -->
    </div>

    <!--FOOTER-->
    <footer class="dark">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-md-4 foot_panel">
            <a href="index.html" class="footer_logo"><img src="images/logo.png" alt="logo" class="bottom25"></a>
            <p class="bottom30">Keep away from people who try to belittle your<br> ambitions Small people always do that but the really
              great Friendly. Keep away from people who try to belittle your ambitions.
            </p>
            <div class="locations bottom30">
              <span><i class="icon-phone2"></i></span>
              <p><span>+(86) 152-2201-0177</span> <a href="#.">eddy@tjlenda.com</a></p>
            </div>
            <ul class="social white">
              <li><a href="#"><i class="fa fa-whatsapp"></i></a></li>
              <li><a href="#"><i class="fa fa-skype"></i></a></li>
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            </ul>
          </div>
          <div class="col-sm-6 col-md-1 foot_panel">

          </div>
          <div class="col-sm-6 col-md-4 foot_panel">
            <h3 class="bottom30">Our Services</h3>
            <ul class="links">
              <li><a href="index.html"><i class="icon-play3"></i>Home</a></li>
              <li><a href="about.html"><i class="icon-play3"></i>About Us</a></li>
              <li><a href="product.html"><i class="icon-play3"></i>Product</a></li>
              <li><a href="contact.html"><i class="icon-play3"></i>Contact Us</a></li>
            </ul>
          </div>
          <div class="col-sm-6 col-md-3 foot_panel">
            <h3 class="bottom30">Business hours</h3>
            <p class="bottom20">Our support available to help you 24
              hours a day, seven days week
            </p>
            <ul class="hours_wigdet white">
              <li>Monday-Friday: <span>08.00-18.00</span></li>
              <li>Saturday:<span>09:00-21:00</span></li>
              <li>Sunday: <span>09:00-20:00</span></li>
              <li>Calendar Events: <span>24-Hour Shift</span></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <!--FOOTER ends-->

    <!--copyright-->
    <div class="copyright dark">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 text-center">
            <p>Copyright &copy; 2017. <strong>LENDA</strong> <span>International Trading Co.,Ltd, All Rights Reserved</p>
            </div>
          </div>
        </div>
      </div>
    <!--copyright ends-->

    <script src="js/jquery-2.2.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.parallax-1.1.3.js"></script>
    <script src="js/jquery.appear.js"></script>
    <script src="js/bootsnav.js"></script>
    <script src="js/jquery.cubeportfolio.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.fancybox.js"></script>
    <script src="js/jquery.themepunch.tools.min.js"></script>
    <script src="js/jquery.themepunch.revolution.min.js"></script>
    <script src="js/revolution.extension.actions.min.js"></script>
    <script src="js/revolution.extension.layeranimation.min.js"></script>
    <script src="js/revolution.extension.navigation.min.js"></script>
    <script src="js/revolution.extension.parallax.min.js"></script>
    <script src="js/revolution.extension.slideanims.min.js"></script>
    <script src="js/revolution.extension.kenburn.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/functions.js"></script>

    <script type="text/javascript">
    $(function () {

      var vm = new Vue({
        el: '#app',
        data:{
          type: '',
          itemList: [],
          letters: [],
          branches: [],
          curLetter: '',
          curBranch: 'AUDI'
        },
        mounted() {
          this.$nextTick(function() {
            this.getUrlParam();
            this.getItemList();
            // this.getLetters();
          });
        },
        methods:{
          getUrlParam() {
            this.type = decodeURIComponent(location.search).slice(1);
          },
          getItemList() {
            axios.get('http://www.tjlenda.com:3000/product', { params: { category: this.type }}).then((res) => {
              if(res.data.status == 0) {
                this.itemList = res.data.result.items;
                this.itemList.forEach((item) => {
                  if (this.letters.indexOf(item.letter) === -1) {
                    this.letters.push(item.letter)
                  }
                  if (this.branches.indexOf(item.branch) === -1) {
                    this.branches.push(item.branch)
                  }
                })
                this.letters.sort();
                this.branches.sort();
              }
            }).catch((err) => {
              console.log(err);
            });
          }
          // getLetters() {
          //   for(var i = 0; i < 26; i++) {
          //     this.letters.push(String.fromCharCode((65+i)));
          //   }
          // },
        }
      });

      $(".portfolio-wrapper > a").fancybox({
        'cyclic': true
      });

    });
    </script>
  </body>
</html>
